<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<link rel="stylesheet" href="/layui/css/layui.css">
<script src="/jquery/bootstrap.min.js"></script>
<style rel="stylesheet" type="text/css">
    .index-page {
        padding: 10px 20px 0;
    }
</style>
<!-- 载入文章头部页面，位置在/client文件夹下的header模板页面，模板名称th:fragment为header -->
<div th:replace="/client/header::header(null,null)"/>


<body style="background-color: #f2dede">
<div class="am-g am-g-fixed blog-fixed index-page" style="background-color: whitesmoke">
    <h1 style="color: #2e6da4">我的动态</h1>
    <hr style="height: 5px;background-color:pink"/>
    <div class="am-u-md-8 am-u-sm-12">
        <!-- 文章遍历并分页展示 -->
        <div th:each="article: ${session.articles.list}">
            <article class="am-g blog-entry-article">
                <div class="am-u-lg-6 am-u-md-12 am-u-sm-12 blog-entry-img">
                    <img width="100%" class="am-u-sm-12" th:src="@{${article.article_img}}"
                         style="width: 200px;height: 200px"/>
                </div>
                <div class="am-u-lg-6 am-u-md-12 am-u-sm-12 blog-entry-text">
                    <!-- 文章分类 -->
                    <span class="blog-color" style="font-size: 15px;"><a th:text="'分类:'+${article.tags}"></a></span>
                    <span>&nbsp;&nbsp;&nbsp;</span>
                    <!-- 发布时间 -->
                    <span style="font-size: 15px;" th:text="'发布于 '+ ${commons.dateFormat(article.created)}"/>
                    <h2>
                        <div><a style="color: #0f9ae0;font-size: 20px;"
                                th:href="@{/user/selectArticleDetail/}+${article.id}" th:text="${article.title}"/>
                        </div>
                    </h2>
                    <!-- 文章摘要-->
                    <a>
                        <div style="font-size: 16px;" th:utext="${commons.intro(article,75)}"/>
                    </a>
                </div>
                <a th:href="@{'/user/toEditArticle/'+${article.id}}"
                   class="btn btn-primary btn-sm waves-effect waves-light m-b-5"
                   style="margin-top: 50px;margin-left: 260px">
                    <i class="fa fa-edit"></i> <span>编辑</span></a>
                <a href="javascript:void(0)" th:onclick="'delArticle('+${article.id}+');'"
                   class="btn btn-danger btn-sm waves-effect waves-light m-b-1"
                   style="margin-top: 50px;margin-left: 30px">
                    <i class="fa fa-trash-o"></i> <span>删除</span></a>
            </article>
        </div>
        <!-- 文章分页信息 -->
        <div class="am-pagination">
            <div th:replace="/comm/paging::pageUser(${session.articles},'上一页','下一页','userArticles',${session.user.getId()})"/>
        </div>
    </div>
    <!-- 博主信息描述 -->
    <div class="am-u-md-4 am-u-sm-12 blog-sidebar">
        <div class="blog-sidebar-widget blog-bor">

            <div id="all">
                <div class="content">
                    <h2 style="background-color: #0b76ac; width: 340px;height: 50px">公告</h2>
                    <div style="margin-top: 20px">
                        <p>昵称：<strong th:text="${session.user.getUsername()}"></strong></p>
                        <p>发表文章数：41</p>
                        <p>交流年龄：4年</p>
                    </div>
                </div>
            </div>
            <br>
            <div class="calendar">
                <div class="title">

                    <h1 class="green" id="calendar-title">Month</h1>
                    <h2 class="green small" id="calendar-year">Year</h2>

                </div>
                <div class="body">
                    <div class="lightgrey body-list">
                        <ul>
                            <li>星期一</li>
                            <li>星期二</li>
                            <li>星期三</li>
                            <li>星期四</li>
                            <li>星期五</li>
                            <li>星期六</li>
                            <li>星期天</li>
                        </ul>
                    </div>
                    <div class="darkgrey body-list">
                        <ul id="days">
                        </ul>

                    </div>
                </div>
            </div>
            <button href="" style="margin-right: 130px;background-color:whitesmoke "
                    class="btn btn-default waves-effect waves-light" id="prev">上个月
            </button>
            <button href="" style="background-color:whitesmoke " class="btn btn-default waves-effect waves-light"
                    id="next">下个月
            </button>
        </div>
        <div style="margin-left: 50px">
            <br>
            <h2 class="blog-text-center blog-title"><span>最新评论</span></h2>
            <th:block th:each="comment:${session.commentList}">
                <div th:each="article: ${session.articles.list}">
                    <div th:if="${article.id==comment.getArticle_id()}">
                        <a style="font-size: 15px;"
                           th:href="@{'/user/selectArticleDetail/'+${comment.getArticle_id()}}"
                           th:text="${commentStat.index+1}+'、'+${article.title}">
                        </a>
                        <p style="margin-top: 20px" th:text="${comment.getContent()}"></p>
                        <span style="font-size: 15px;" th:text="${commons.dateFormat(comment.getCreated())}"/>
                        <p style="margin-left: 260px" th:text="'--'+${comment.getReviewer()}"></p>
                    </div>
                </div>
                <hr style="margin-top: 0.6rem;margin-bottom: 0.4rem"/>
            </th:block>
        </div>
    </div>


</div>
</body>
<style type="text/css">
    #all {
        border: 5px solid #CCCCCC;
        width: 350px;
        height: 260px;
        font-family: "微软雅黑";
    }

    #all .content {
        width: 350px;
        height: 260px;
        font-size: 15px;
    }

    #all .text {
        font-family: "微软雅黑";
        font-size: 12px;
    }
</style>

<style>
    .calendar {
        width: 350px;
        height: 350px;
        box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.1);
    }

    .body-list ul {
        width: 100%;
        font-family: arial;
        font-weight: bold;
        font-size: 14px;
    }

    .body-list ul li {
        width: 14.28%;
        height: 36px;
        line-height: 36px;
        list-style-type: none;
        display: block;
        box-sizing: border-box;
        float: left;
        text-align: center;
    }

    .lightgrey {
        color: #a8a8a8; /*浅灰色*/
    }

    .darkgrey {
        color: #565656; /*深灰色*/
    }

    .green {
        color: #6ac13c; /*绿色*/
    }

    .greenbox {
        border: 1px solid #6ac13c;
        background: #e9f8df; /*浅绿色背景*/
    }
</style>
<script>
    var month_olympic = [31, 29, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
    var month_normal = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
    var month_name = ["January", "Febrary", "March", "April", "May", "June", "July", "Auguest", "September", "October", "November", "December"];

    var holder = document.getElementById("days");
    var prev = document.getElementById("prev");
    var next = document.getElementById("next");
    var ctitle = document.getElementById("calendar-title");
    var cyear = document.getElementById("calendar-year");

    var my_date = new Date();
    var my_year = my_date.getFullYear();
    var my_month = my_date.getMonth();
    var my_day = my_date.getDate();

    //获取某年某月第一天是星期几
    function dayStart(month, year) {
        var tmpDate = new Date(year, month, 1);
        return (tmpDate.getDay());
    }

    //计算某年是不是闰年，通过求年份除以4的余数即可
    function daysMonth(month, year) {
        var tmp = year % 4;
        if (tmp == 0) {
            return (month_olympic[month]);
        } else {
            return (month_normal[month]);
        }
    }

    function refreshDate() {
        var str = "";
        var totalDay = daysMonth(my_month, my_year); //获取该月总天数
        var firstDay = dayStart(my_month, my_year); //获取该月第一天是星期几
        var myclass;
        for (var i = 1; i < firstDay; i++) {
            str += "<li></li>"; //为起始日之前的日期创建空白节点
        }
        for (var i = 1; i <= totalDay; i++) {
            if ((i < my_day && my_year == my_date.getFullYear() && my_month == my_date.getMonth()) || my_year < my_date.getFullYear() || (my_year == my_date.getFullYear() && my_month < my_date.getMonth())) {
                myclass = " class='lightgrey'"; //当该日期在今天之前时，以浅灰色字体显示
            } else if (i == my_day && my_year == my_date.getFullYear() && my_month == my_date.getMonth()) {
                myclass = " class='green greenbox'"; //当天日期以绿色背景突出显示
            } else {
                myclass = " class='darkgrey'"; //当该日期在今天之后时，以深灰字体显示
            }
            str += "<li" + myclass + ">" + i + "</li>"; //创建日期节点
        }
        holder.innerHTML = str; //设置日期显示
        ctitle.innerHTML = month_name[my_month]; //设置英文月份显示
        cyear.innerHTML = my_year; //设置年份显示
    }

    refreshDate(); //执行该函数

    prev.onclick = function (e) {
        e.preventDefault();
        my_month--;
        if (my_month < 0) {
            my_year--;
            my_month = 11;
        }
        refreshDate();
    }
    next.onclick = function (e) {
        e.preventDefault();
        my_month++;
        if (my_month > 11) {
            my_year++;
            my_month = 0;
        }
        refreshDate();
    }

</script>
<script>
    function delArticle(id) {

        var user_id = $("#user_id").val();
        $.post("/user/deleteArticle",
            {
                id: id
            },
            function (data) {

                if (data == "OK") {
                    alert("删除成功！");
                    window.location.href = '/userArticles/' + '1/' + user_id;
                }
                else {
                    alert("删除失败！");
                    window.location.reload();
                }
            }
        )
    }
</script>
<!-- 载入文章尾部页面，位置在/client文件夹下的footer模板页面，模板名称th:fragment为footer -->
<div th:replace="/client/footer::footer"/>
</html>
